<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>找回密码</title>

  <script th:src="@{/js/jquery-1.12.4.min.js}"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" th:href="@{/bootstrap-3.4.1-dist/css/bootstrap.min.css}" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <script th:src="@{/bootstrap-3.4.1-dist/js/bootstrap.min.js}" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  <link rel="stylesheet" th:href="@{/css/normalize.min.css}">
  <link rel="stylesheet" th:href="@{/css/style.css}">

</head>

<body>
<div id="formContainer">
  <div class="formLeft">
    <img th:src="@{/images/3.jpg}">
  </div>
  <div class="formRight">
    <!-- Forgot password form -->
    <form autocomplete="off">
      <header>
        <h1>忘记密码</h1>
        <span style="color: #ff0505;" id="msg">输入用户名和邮箱找回密码</span>
      </header>
      <section>
        <label>
          <p>用户名</p>
          <input type="text" id="username" placeholder="请输入用户名">
          <div class="border">
            <span id="userMsg" style="color: red;"></span>
          </div>
        </label>
        <label>
          <p>邮箱</p>
          <input type="text" id="email" placeholder="请输入邮箱">
          <div class="border">
            <span id="emailMsg" style="color: red;"></span>
          </div>
        </label>
        <input type="button" value="找回密码" class="btn btn-primary" style="margin-left: 30px; width: 240px;" onclick="findPwd()"/>
      </section>
      <footer>
        <span style="margin-left: 130px;"></span>
        <a th:href="@{/login.do}">
          <button type="button">返回</button>
        </a>
      </footer>
    </form>
  </div>
</div>
</body>
<script type="text/javascript">
  $(function () {
    $("#username").blur(function () {
      var username = $("#username").val();
      if (username == "") {
        $("#userMsg").html("用户名不能为空！！");
        $("#email").val("");
        $("#username").focus();
        return;
      } else {
        $("#userMsg").empty();
      }
    });

    $("#email").blur(function () {
      var email = $("#email").val();
      if (email == "") {
        $("#pwdMsg").html("密码不能为空！！");
        $("#email").val("");
        $("#email").focus();
        return;
      } else {
        $("#emailMsg").empty();
      }
    });
  });

  function findPwd() {
    var username = $("#username").val();
    var email = $("#email").val();
    if (username == "") {
      $("#userMsg").html("用户名不能为空！！");
      $("#username").focus();
      $("#email").val("");
      return;
    } else {
      $("#userMsg").empty();
    }
    if (email == "") {
      $("#emailMsg").html("邮箱不能为空！！");
      $("#email").focus();
      return;
    } else {
      $("#emailMsg").empty();
    }
      $.ajax({
        type: "POST",
        url: "/findPwd.do",
        data: {
          userName: username,
          email: email
        },
        dataType: "json",
        success: function (result) {
          if (result != 0) {
            $("#msg").html("密码为：" + result);
            $("#username").attr("disabled", "disabled");
            $("#email").attr("disabled", "disabled");
          } else {
            $("#username").focus();
            $("#username").val("");
            $("#email").val("");
            $("#msg").html("账号或邮箱错误！！");
          }
        }
      });
  }
</script>
</html>